<template>
  <section>
    <el-table v-loading="loading" :data="feedbackInfoList" size="small" style="width: 100%">
      <el-table-column type="index" label="序号" width="55"/>
      <el-table-column prop="studentName" label="学员姓名"/>
      <el-table-column prop="startTime" label="开始时间">
        <template slot-scope="scope">
          {{ scope.row.startTime | formatDate('yyyy-MM-dd hh:mm') }}
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间">
        <template slot-scope="scope">
          {{ scope.row.endTime | formatDate('yyyy-MM-dd hh:mm') }}
        </template>
      </el-table-column>
      <el-table-column prop="statusTxt" label="点名状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" class="label label-green">{{scope.row.statusTxt}}</span>
          <span v-if="scope.row.status == 2" class="label label-red">{{scope.row.statusTxt}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="上课反馈"/>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :page-size="size"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
  </section>
</template>

<script>
import { getFeedbackList } from '@/api/feedback'
// import util from '../../common/js/util';

export default {
  props: {
    studentId: {
      type: [Number, String],
      default: '',
      required: false
    },
    classId: {
      type: [Number, String],
      default: 0,
      required: false
    }
  },
  data() {
    return {
      loading: false,
      feedbackInfoList: [],
      // 分页功能
      total: 0,
      page: 1,
      size: 10,
    }
  },
  mounted() {
    this.getFeedbackList()
  },
  methods: {
    getFeedbackList() {
      this.loading = true
      const para = {
        size: this.size,
        page: this.page,
        merchantClassId: this.classId,
        merchantStudentId: this.studentId
      }
      getFeedbackList(para).then(res => {
        if (res.code == 0 && res.data != null) {
          this.total = res.data.total
          this.feedbackInfoList = res.data.list
        }
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$notify({
          title: '获取点名记录失败！',
          message: err.msg,
          type: 'error'
        })
      })
    },
    pageChange(e) {
      this.page = e
      this.getFeedbackList()
    },
    sizeChange(e) {
      this.page = 1
      this.size = e
      this.getFeedbackList()
    }
  }
}
</script>

<style scoped>
.el-checkbox.is-bordered.el-checkbox--small {
  padding: 7px 15px 7px 10px;
}
</style>
